import Vue from 'vue';
import VueRouter, { RouteConfig } from 'vue-router';
import IndexComponent from '../views/Index.vue';

Vue.use(VueRouter);

const routes: RouteConfig[] = [
  {
    path: '/',
    name: 'Index',
    component: IndexComponent,
    //redirect: '/home',
    children:[
      {
        path:'home',
        name:'home',
        alias:'/',
        component: () => import('../views/Home.vue'),
      },
      {
        path:'cate',
        name:'cate',
        component: () => import('../views/Category.vue'),
      },
      {
        path:'cart',
        name:'cart',
        component: () => import('../views/Cart.vue'),
      },
      {
        path:'my',
        name:'my',
        component: () => import('../views/My.vue'),
      },
    ]
  },
  {
    path: '/nav',
    name: 'nav',
    component: () => import('../views/NavIndex.vue'),
    //props: (route) => ({title: route.query.title}),
    children:[
      {
        path: 'frame',
        name: '/nav/frame',
        alias:'/frame',
        meta:{
          navTitle:'嵌入页面'
        },
        component: () => import('../views/Frame.vue'),
      },
      {
        path: 'cateGoods/:id/:index',
        name: '/nav/cateGoods',
        alias:'/cateGoods/:id/:index',
        meta:{
          navTitle:'分类商品'
        },
        component: () => import('../views/CateGoods.vue'),
      },
      {
        path: 'brand/:id',
        name: '/nav/brand',
        alias:'/brand/:id',
        meta:{
          navTitle:'制造商'
        },
        component: () => import('../views/Brand.vue'),
      },
      {
        path: 'goodDetail/:id',
        name: '/nav/goodDetail',
        alias:'/goodDetail/:id',
        meta:{
          navTitle:'商品详情'
        },
        component: () => import('../views/GoodDetail.vue'),
      },
      {
        path: 'order',
        name: '/nav/order',
        alias:'/order',
        meta:{
          navTitle:'订单填写'
        },
        component: () => import('../views/Order.vue'),
      },
      {
        path: 'pay',
        name: '/nav/pay',
        alias:'/pay',
        meta:{
          navTitle:'支付'
        },
        component: () => import('../views/Order.vue'),
      },
      {
        path: 'collect',
        name: '/nav/collect',
        alias:'/collect',
        meta:{
          navTitle:'我的收藏'
        },
        component: () => import('../views/Collect.vue'),
      },
      {
        path: 'address',
        name: '/nav/address',
        alias:'/address',
        meta:{
          navTitle:'地址管理'
        },
        component: () => import('../views/Address.vue'),
      },
      {
        path: 'footprint',
        name: '/nav/footprint',
        alias:'/footprint',
        meta:{
          navTitle:'我的足迹'
        },
        component: () => import('../views/FootPrint.vue'),
      },
      {
        path: 'address/edit',
        name: '/nav/address/edit',
        alias:'/address/edit',
        meta:{
          navTitle:'添加地址'
        },
        component: () => import('../views/AddressEdit.vue'),
      },
      {
        path: 'orderList',
        name: '/nav/orderList',
        alias:'/orderList',
        meta:{
          navTitle:'订单列表'
        },
        component: () => import('../views/OrderList.vue'),
      },
      {
        path: 'goodsList',
        name: '/nav/goodsList',
        alias:'/goodsList',
        meta:{
          navTitle:'商品列表'
        },
        component: () => import('../views/GoodsList.vue'),
      }
    ]
  },
  {
    path: '/register',
    name: 'register',
    component: () => import( '../views/Register.vue'),
  },
  {
    path: '/login',
    name: 'login',
    component: () => import( '../views/Login.vue'),
    beforeEnter: (to, from, next) => {
      // 在渲染该组件的对应路由被 confirm 前调用
      // 不！能！获取组件实例 `this`
      // 因为当守卫执行前，组件实例还没被创建
      //console.log(to,from);     
      next();
    }
  },
  {
    path: '*',
    component: () => import('../views/NotFound.vue'),
  }
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

export default router;
